component.accordions

accordion-1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird.
<!-- Accordion Default -->
<div class="panel-group accordion" id="accordion">

	<!-- Accordion Item -->
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-1">Collapsible Accordions</a></h4>
	    </div>
	    <div id="collapse-1" class="panel-collapse collapse">
	      	<div class="panel-body">
	        	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
	      	</div>
	    </div>
  	</div>
  	<!-- // Accordion Item END -->
  	
  	<!-- Accordion Item -->
  	<div class="panel panel-default">
	    <div class="panel-heading">
	    	<h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-2">Collapsible Accordions</a></h4>
	    </div>
	    <div id="collapse-2" class="panel-collapse collapse">
	    	<div class="panel-body">
	        	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
	      	</div>
	    </div>
  	</div>
  	<!-- // Accordion Item END -->
  	
  	<!-- Accordion Item -->
  	<div class="panel panel-default">
	    <div class="panel-heading">
	    	<h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-3">Collapsible Accordions</a></h4>
	    </div>
	    <div id="collapse-3" class="panel-collapse collapse in">
	    	<div class="panel-body">
	        	Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird.
	      	</div>
	    </div>
  	</div>
  	<!-- // Accordion Item END -->
  	
</div>
<!-- // Accordion Default END -->

Code

@import "http://localhost/shared/components/modules/admin/widgets/accordions/assets/less/accordions.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

accordion-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc consectetur sed.
Quisque porttitor elit ac mauris aliquam sollicitudin. Nam imperdiet ligula et dolor pulvinar consequat. Sed in turpis id erat vehicula gravida.
Vivamus eros tortor, consequat sed posuere non, tempus non ligula. Integer pharetra sem eu dolor rhoncus euismod.
Etiam suscipit leo tincidunt mi volutpat commodo. Morbi tempor interdum dictum. In hac habitasse platea dictumst.
<!-- Accordion #2 Style -->
<div class="panel-group accordion accordion-2" id="tabAccountAccordion">

	<!-- Accordion Item -->
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-1-1"><i></i>Lorem ipsum dolor sit amet?</a></h4>
	    </div>
	    <div id="collapse-1-1" class="panel-collapse collapse in">
	      	<div class="panel-body">
	        	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc consectetur sed.
	      	</div>
	    </div>
  	</div>
  	<!-- // Accordion Item END -->
  	
  	<!-- Accordion Item -->
  	<div class="panel panel-default">
	    <div class="panel-heading">
	      	<h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-2-1"><i></i>Quisque porttitor elit ac mauris?</a></h4>
	    </div>
	    <div id="collapse-2-1" class="panel-collapse collapse">
	    	<div class="panel-body">
	        	Quisque porttitor elit ac mauris aliquam sollicitudin. Nam imperdiet ligula et dolor pulvinar consequat. Sed in turpis id erat vehicula gravida.
	      	</div>
	    </div>
  	</div>
  	<!-- // Accordion Item END -->
  	
  	<!-- Accordion Item -->
  	<div class="panel panel-default">
	    <div class="panel-heading">
	      	<h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-3-1"><i></i>Vivamus eros tortor consequat sed?</a></h4>
	    </div>
	    <div id="collapse-3-1" class="panel-collapse collapse">
	    	<div class="panel-body">
	        	Vivamus eros tortor, consequat sed posuere non, tempus non ligula. Integer pharetra sem eu dolor rhoncus euismod.
	      	</div>
	    </div>
  	</div>
  	<!-- // Accordion Item END -->
  	
  	<!-- Accordion Item -->
  	<div class="panel panel-default">
	    <div class="panel-heading">
	      	<h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-4-1"><i></i>Etiam suscipit leo tincidunt mi volutpat?</a></h4>
	    </div>
	    <div id="collapse-4-1" class="panel-collapse collapse">
	    	<div class="panel-body">
	        	Etiam suscipit leo tincidunt mi volutpat commodo. Morbi tempor interdum dictum. In hac habitasse platea dictumst.
	      	</div>
	    </div>
  	</div>
  	<!-- // Accordion Item END -->
  	
</div>
<!-- // Accordion #2 Style END -->

Code

@import "http://localhost/shared/components/modules/admin/widgets/accordions/assets/less/accordions.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.